<!-- 个人信息 -->
<template>
	<view>
		<view class="info">
			<view class="info_part" @click="editHead">
				<view class="info_name">上传头像</view>
				<view class="circle">
					<image :src="user.head_img"></image>
				</view>
			</view>
			<view class="info_part">
				<view class="info_name">用户昵称</view>
				<view class="info_text">{{ user.name }}</view>
			</view>
			<view class="info_part">
				<view class="info_name">登入账户</view>
				<view class="info_text">{{ user.userid }}</view>
			</view>
			<view class="info_part">
				<view class="info_name">绑定手机</view>
				<view class="info_text">{{ user.tel }}</view>
			</view>
			<view class="info_part">
				<view class="info_name">绑定微信</view>
				<view class="info_text">{{ user.status }}</view>
			</view>
			<view class="loginout" @click="$navigateTo(login_url)">退出登录</view>
		</view>
		<!-- 让父标签 0宽 0高 隐藏溢出 -->
		<view style="width:0px;height:0px; overflow:hidden"> 
			<canvas  id="canvas" ></canvas>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				login_url: "/pages/login/index",
			};
		},
		computed: {
			...mapState({
				user: state => state.init.user,
			}),
		},
		methods: {
			//修改头像
			editHead() {
				// 取到图片路径;
				// 把图片路径传输给后台
				// #ifdef MP-WEIXIN
				let that = this;
				that.$tools.chooseImage().then(res => {
					let tempFilePaths = res[0]
					let imgList = '';
					that.upload(tempFilePaths)
				})
				// #endif
				// #ifdef MP-ALIPAY
				let that = this;
				that.$tools.chooseImage().then(res => {
					let imagePath = res[0];
					console.log(imagePath,'path');
					that.$tools.alypayBase64(imagePath).then( res => {
						let base64 = res
						that.uploadApi(base64);
					})
				})
				// #endif
			},
			// 调用接口上传
			uploadApi(val) {
				this.$api('init', {
					tempFilePaths: 'data:image/png;base64,' + val
				}).then(res => {
					this.user.head_img = res.data
				})
			},
			//微信上传图片
			upload(tempFilePaths) {
				let that = this;
				let imgList = '';
				that.$tools.getFileSystemManager(tempFilePaths).then(res => {
					console.log(res,'thenRes');
					imgList = res.data
					that.uploadApi(imgList);
				}).catch(e => {
					console.log(e,'e');
				})
			},
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	.info {
		width: 100%;
		height: 100%;
		padding: 6px 16px 0;
		box-sizing: border-box;
		font-size: 28rpx;
		.loginout{
			padding-top: 42rpx;
			color: #666;
			text-align: center;
			line-height: 14px;
			font-weight: 400;
		}
		.info_img {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			padding: 15rpx 40rpx;
		}
		.circle {
			border-radius: 50%;
			width: 72rpx;
			height: 72rpx;
			float: right;
			margin-right: 28rpx;
			margin-top: 20rpx;
			image {
				border-radius: 50%;
				width: 72rpx;
				height: 72rpx;
				object-fit: cover;
				object-position: center;
			}
		}
		.info_part {
			position: relative;
			.info_text{
				float: right;
				padding-top: 35rpx;
				color: #666;
			}
			.info_name {
				display: inline-block;
				font-size: 14px;
				color: #333;
				line-height: 56px;
			}
			&:nth-child(-n+1) {
				&::before {
					width: 24px;
					height: 24px;
					content: "";
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					background-image: url(/static/img/arrow_right.png);
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}

			&::after {
				display: block;
				padding: 0;
				margin: 0;
				clear: both;
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #eee;
				width: 100%;
				height: 1px;
			}
		}
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>
